<script setup>
import userStore from '../store'

const { todos } = userStore()
</script>

<template>
  <!-- This footer should be hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      ><strong>{{ todos.leftCount }}</strong> 剩余
    </span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a
          @click="todos.changeType('all')"
          :class="{ selected: todos.type === 'all' }"
          href="#/all"
          >所有</a
        >
      </li>
      <li>
        <a
          @click="todos.changeType('active')"
          :class="{ selected: todos.type === 'active' }"
          href="#/active"
          >未完成</a
        >
      </li>
      <li>
        <a
          @click="todos.changeType('completed')"
          :class="{ selected: todos.type === 'completed' }"
          href="#/completed"
          >已经完成</a
        >
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button
      v-if="todos.isclearable"
      class="clear-completed"
      @click="todos.handleClear"
    >
      清空已完成
    </button>
  </footer>
</template>
